<template>
  <div v-loading="loading" class="AvatarUpload add_container ">
    <div style="display: flex" class="avatar main_main">
      <div class="avatar-left">
        <!--        <div v-show="!options.img">-->
        <!--          <el-upload-->
        <!--            ref="upload"-->
        <!--            action=""-->
        <!--            style="text-align: center;margin-bottom: 24px"-->
        <!--            :on-change="uploads"-->
        <!--            accept="image/png, image/jpeg, image/jpg"-->
        <!--            :show-file-list="false"-->
        <!--            :auto-upload="false"-->
        <!--          >-->
        <!--            <el-button slot="trigger" ref="uploadBtn">选择图片</el-button>-->
        <!--          </el-upload>-->
        <!--          <div class="memo">支持jpg、png格式的图片，大小不超过 10M</div>-->
        <!--        </div>-->
        <!--        <div v-show="options.img" class="avatar-left-crop">-->
        <!--          <vueCropper-->
        <!--            ref="cropper"-->
        <!--            class="crop-box"-->
        <!--            :img="options.img"-->
        <!--            :output-size="options.size"-->
        <!--            :output-type="options.outputType"-->
        <!--            :info="options.info"-->
        <!--            :full="options.full"-->
        <!--            :can-move="options.canMove"-->
        <!--            :can-move-box="options.canMoveBox"-->
        <!--            :original="options.original"-->
        <!--            :auto-crop="options.autoCrop"-->
        <!--            :auto-crop-width="options.autoCropWidth"-->
        <!--            :auto-crop-height="options.autoCropHeight"-->
        <!--            :fixed-box="options.fixedBox"-->

        <!--            @realTime="realTime"-->
        <!--          />-->
        <!--          <p class="avatar-left-p">-->
        <!--            鼠标滚轮缩放控制图片显示大小，鼠标拖拽调整显示位置-->
        <!--          </p>-->
        <ImgCutter
          ref="imgCutterModal"
          :tool="false"
          :is-modal="false"
          :box-width="600"
          :box-height="448"
          @cutDown="cutDown"
          @onPrintImg="onPrintImg"
        />
        <!--        </div>-->
      </div>
      <div class="avatar-right">
        <!--        <div v-for="(item,index) in previewsDiv" :key="index" class="avatar-right-div" :style="item.style">-->
        <!--          <div v-show="options.img" :class="previews.div" class="avatar-right-previews" :style="item.zoomStyle">-->
        <!--            <img :src="previews.url" :style="previews.img">-->
        <!--          </div>-->
        <!--        </div>-->
        <div class="avatar-right-div" style="width: 108px;height: 108px;margin: 0 auto">
          <img v-if="previewURL" :src="previewURL">
        </div>
        <div class="avatar-right-div" style="width: 68px;height: 68px;margin: 0 auto">
          <img v-if="previewURL" :src="previewURL">
        </div>
        <div class="avatar-right-div" style="width: 48px;height: 48px;margin: 0 auto">
          <img v-if="previewURL" :src="previewURL">
        </div>
        <div class="avatar-right-text">
          <!--          <el-button v-if="options.img" type="text" @click.stop="uploadPreviews">重新上传</el-button>-->
          <!--          <span v-else>预览</span>-->
          <el-button v-if="previewURL" type="text" @click.stop="reChoose">重新选择</el-button>

        </div>
      </div>
    </div>
    <div class="footer main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="getCrop">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import ImgCutter from 'vue-img-cutter'
import store from '@/store'
export default {
  name: 'AvatarUpload',
  components: {
    VueCropper, ImgCutter
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      loading: false,
      // vueCropper组件 裁剪配置信息
      options: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        full: true, // 输出原图比例截图 props名full
        outputType: 'png', // 裁剪生成额图片的格式
        canMove: false, // 能否拖动图片
        original: true, // 上传图片是否显示原始宽高
        canMoveBox: true, // 能否拖动截图框
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200,
        autoCropHeight: 200,
        fixedBox: true // 截图框固定大小
      },
      // 实时预览图数据
      previews: {},
      previewURL: '',
      previewFile: '',
      fileName: '',
      // 实时预览图样式
      previewsDiv: [
        // 108px 预览样式
        {
          style: {
            width: '108px',
            height: '108px',
            margin: '0 auto'
          },
          zoomStyle: {
            zoom: 0.54
          }
        },
        // 68px 预览样式
        {
          style: {
            width: '68px',
            height: '68px',
            margin: '27px auto'
          },
          zoomStyle: {
            zoom: 0.34
          }
        },
        // 48px 预览样式
        {
          style: {
            width: '48px',
            height: '48px',
            margin: '0 auto'
          },
          zoomStyle: {
            zoom: 0.24
          }
        }
      ]
    }
  },
  methods: {
    // 读取原图
    uploads(file) {
      console.log('file', file)
      const isIMAGE = file.raw.type == 'image/jpeg' || file.raw.type == 'image/png'
      const isLt3M = file.raw.size / 1024 / 1024 < 10
      if (!isIMAGE) {
        this.$message({
          showClose: true,
          message: '请选择 jpg、png 格式的图片！',
          type: 'error' // 提示类型
        })
        return false
      }
      if (!isLt3M) {
        this.$message({
          showClose: true,
          message: '上传图片大小不能超过 10MB',
          type: 'error' // 提示类型
        })
        return false
      }
      this.options.img = URL.createObjectURL(file.raw)
      console.log('this.options.img', this.options.img)
      // const reader = new FileReader()
      // reader.readAsDataURL(file.raw)
      // reader.onload = e => {
      //   console.log('e', e)
      //   this.options.img = e.target.result // base64
      // }
      this.fileName = file.raw.name
    },
    // 实时预览数据
    realTime(data) {
      this.previews = data
    },
    // 重新上传
    uploadPreviews() {
      this.$refs.uploadBtn.$el.click()
    },
    // 获取截图信息
    getCrop() {
      // 获取截图的 base64 数据
      // this.$refs.cropper.getCropData((data) => {
      // })
      // 获取截图的 blob 数据
      // this.$refs.cropper.getCropBlob((data) => {
      this.loading = true
      // const file = new window.File([data], this.fileName)
      const file = this.previewFile
      const formData = new FormData()
      formData.append('file', file)
      // formData.append('userId', this.userId)

      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: getToken()
        }
      }

      axios.post('/common/resource/user/upload', formData, config).then(res => {
        switch (res.data.code) {
          case 200:
            this.$message({
              message: res.data.msg,
              type: 'success'
            })
            this.$store.commit('user/SET_AVATAR', res.data.url)
            this.$parent.getById()
            this.$layer.close(this.layerid)// 关闭弹框
            break
          default:
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
        }
      }).finally(() => {
        this.loading = false
      })
      // })
    },

    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    reChoose() {
      this.$refs['imgCutterModal'].$refs['inputFile'].click()
    },
    cutDown(res) {
    },
    onPrintImg(res) {
      this.previewURL = res.dataURL
      this.fileName = res.fileName
      this.previewFile = res.file
    }
  }

}
</script>

<style lang="less" scoped>
.AvatarUpload{
  width: 100%;
  height: 100%;
  .memo{
    width: 100%;
    height: 30px;
    display: flex;justify-content: center;align-items: center;
    font-size: 14px;
    color: #666666;
  }
  .footer{
    width: 100%;
    display: flex;justify-content: flex-end;align-items: center;
    padding-top: 10px;
  }
}
.avatar {
  display: flex;

.avatar-left {
  display: flex;
  justify-content: center;
  align-items: center;
  //width: 400px;
  //height: 400px;
  //width: 60%;
  background-color: #F0F2F5;
  margin-right: 10px;
  border-radius: 4px;

.avatar-left-crop {
  width: 400px;
  height: 400px;
  position: relative;

.crop-box {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden
}

}

.avatar-left-p {
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 20px;
  color: #ffffff;
  font-size: 14px;
}
}

.avatar-right {
  flex: 1;
  //width: 150px;
  background-color: #F0F2F5;
  border-radius: 4px;
  padding: 16px 0;
  box-sizing: border-box;
  display: flex;align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;

.avatar-right-div {
  border: 3px solid #ffffff;
  border-radius: 50%;
  overflow: hidden;
  img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.avatar-right-previews {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}

.avatar-right-text {
  text-align: center;
  margin-top: 50px;
  font-size: 14px;

span {
  color: #666666;
}
}
}
}
.main_main{
  padding: 20px;
}

/deep/ .i-dialog-footer{
  display: none;
}
/deep/ .toolBox{
  .btn{
    width: 100px;
    height: 30px;
    background-color: #387bfc;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    padding: 0px;
  }
  .btn:hover{
    background-color: #9BBDFD;
  }
}
</style>
